
<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="编辑资料"
    ></van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <input type="file" hidden ref="inputRef" @change="changePhoto" />
      <van-cell is-link title="头像" center>
        <van-image
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="user.photo"
          @click="photoClick"
        />
      </van-cell>

      <van-cell is-link title="名称" :value="user.name" @click="clickName" />
      <van-cell
        is-link
        title="性别"
        :value="user.gender === 1 ? '男' : '女'"
        @click="clickGender"
      />
      <van-cell
        is-link
        title="生日"
        :value="user.birthday"
        @click="birthdayClick"
      />
    </van-cell-group>
    <van-dialog
      v-model="showName"
      title="修改名字"
      show-cancel-button
      @confirm="updateName"
    >
      <van-field v-model.trim="editUser.name" placeholder="用户名" />
    </van-dialog>
<!--
    <van-dialog
      v-model="showGender"
      title="修改性别"
      show-cancel-button
      @confirm="updateGender"
    >

      <van-radio-group v-model="changeGnder" direction="horizontal">
        <van-radio :name="1">男</van-radio>
        <van-radio :name="0">女</van-radio>
      </van-radio-group>
    </van-dialog> -->

    <van-popup v-model="showBirthday" position="bottom">
      <van-nav-bar title="修改生日"> </van-nav-bar>
      <!-- min-date：  dateTime-picker中最小时间 -->
      <!-- max-date：  dateTime-picker中最大时间 -->
      <van-datetime-picker
        v-model="editUser.birthday"
        type="date"
        title="选择年月日"
        @cancel="showBirthday = false"
        @confirm="updateBirthday"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getProfile, updateUserInfo, updatePhoto } from '@/api/user.js'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前用户的信息
      user: {},
      editUser: {}, // 专门用来回显数据  不和user互相影响
      changeGnder: 1,
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  methods: {
    async changePhoto () {
      const a = this.$refs.inputRef.files[0]
      if (!a) {
        return false
      }
      // console.log(a)
      const fd = new FormData()
      fd.append('photo', a)
      await updatePhoto(fd)
      // console.log(res)
      this.hgetProfile()
      this.$toast.success('修改头像成功')
    },
    photoClick () {
      this.$refs.inputRef.click()
    },
    birthdayClick () {
      this.showBirthday = true
      // 不能直接赋值  要经过类型处理才可以（字符串 -> date）
      // this.editUser.birthday = new Date(this.user.birthday)
      this.$set(this.editUser, 'birthday', new Date(this.user.birthday))
    },
    async updateBirthday (value) {
      console.log(value)
      const newDate = dayjs(value).format('YYYY-MM-DD')
      // console.log(newDate)
      this.user.birthday = newDate
      const res = await updateUserInfo({ birthday: this.user.birthday })
      console.log(res)
      this.hgetProfile()
      this.$toast.success('修改生日成功')
      this.showBirthday = false
    },
    clickGender () {
      this.showGender = true
      // if (this.user.gender === 1) {
      //   this.editUser.gender = '男'
      // } else {
      //   this.editUser.gender = '女'
      // }
      this.changeGnder = this.user.gender
    },
    async updateGender () {
      // if (this.editUser.gender === '') {
      //   this.$toast.fail('内容不可以为空')
      //   return false
      // }
      if (this.changeGnder === '') {
        this.$toast.fail('内容不可以为空')
        return false
      }
      const res = await updateUserInfo({
        // gender: this.editUser.gender === '男' ? 1 : 0
        gender: this.changeGnder
      })
      console.log(res)
      this.hgetProfile()
      this.$toast.success('修改性别成功')
      // this.user.gender = 0
    },
    clickName () {
      this.showName = true
      // this.editUser.name = this.user.name
      this.$set(this.editUser, 'name', this.user.name)
    },
    async updateName () {
      // if (this.newName.length === 0) {
      //   this.$toast.fail('内容不可以为空')
      //   return false
      // }
      if (this.editUser.name.length > 7) {
        this.$toast.fail('内容不可以超过7个')
        return false
      }
      const res = await updateUserInfo({ name: this.editUser.name })
      console.log(res)
      this.hgetProfile()
      this.$toast.success('修改名字成功')
    },
    async hgetProfile () {
      const res = await getProfile()
      // console.log(res)
      this.user = res.data.data
    }
  },
  mounted () {
    this.hgetProfile()
  }
}
</script>
